<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>高级中学管理系统</title>
    <link rel="stylesheet" type="text/css" href="plugin/layui/css/layui.css"/>
    <link rel="stylesheet" href="plugin/font-awesome/css/font-awesome.min.css" media="all"/>
    <link rel="stylesheet" href="src/lvdong/css/app.css" media="all"/>
    <link rel="stylesheet" href="src/lvdong/css/themes/default.css" media="all" id="skin" kit-skin/>
    <script src="plugin/layui/layui.js" type="text/javascript" charset="utf-8"></script>

    <script src="../bootstrap/jquery.3.2.1.min.js"></script>
    <script src="../vue/Vue.js"></script>
    <script src="../vue/axios.js"></script>
</head>
<body class="kit-theme">
<div class="layui-layout layui-layout-admin kit-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">高级中学管理系统</div>
        <div class="layui-logo kit-logo-mobile"></div>
        <ul class="layui-nav layui-layout-left kit-nav">
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">学生系统</a></dd>
                    <dd><a href="javascript:;">校长系统</a></dd>
                    <dd><a href="javascript:;">老师系统</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right kit-nav">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <i class="layui-icon">&#xe63f;</i> 皮肤
                </a>
                <dl class="layui-nav-child skin">
                    <dd><a href="javascript:;" data-skin="default" style="color:#393D49;"><i
                            class="layui-icon">&#xe658;</i> 默认</a></dd>
                    <dd><a href="javascript:;" data-skin="orange" style="color:#ff6700;"><i
                            class="layui-icon">&#xe658;</i> 橘子橙</a></dd>
                    <dd><a href="javascript:;" data-skin="green" style="color:#00a65a;"><i
                            class="layui-icon">&#xe658;</i> 原谅绿</a></dd>
                    <dd><a href="javascript:;" data-skin="pink" style="color:#FA6086;"><i
                            class="layui-icon">&#xe658;</i> 少女粉</a></dd>
                    <dd><a href="javascript:;" data-skin="blue.1" style="color:#00c0ef;"><i
                            class="layui-icon">&#xe658;</i> 天空蓝</a></dd>
                    <dd><a href="javascript:;" data-skin="red" style="color:#dd4b39;"><i class="layui-icon">&#xe658;</i>
                        枫叶红</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://m.zhengjinfan.cn/images/0.jpg" class="layui-nav-img"> Van
                </a>
                <dl class="layui-nav-child">
                    <dd>
                        <a href="javascript:;" kit-target
                           data-options="{url:'basic.html',icon:'&#xe658;',title:'基本资料',id:'966'}"><span>基本资料</span></a>
                    </dd>
                    <dd>
                        <a href="javascript:;">安全设置</a>
                    </dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;"><i class="fa fa-sign-out" aria-hidden="true"></i> 注销</a>
            </li>
        </ul>
    </div>


    <div class="layui-side layui-bg-black kit-side">
        <div class="layui-side-scroll">
            <div class="kit-side-fold"><i class="fa fa-navicon" aria-hidden="true"></i></div>
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="kitNavbar" kit-navbar>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;"><i class="fa fa-plug" aria-hidden="true"></i><span> 学习</span></a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a href="javascript:;" data-url="homework.html" data-icon="fa-user" data-title="作业" kit-target
                               data-id='2'><i
                                    class="fa fa-user" aria-hidden="true"></i><span> 作业</span></a>
                        </dd>
                        <dd>
                            <a href="javascript:;" data-url="test.html" data-icon="fa-user" data-title="考试" kit-target
                               data-id='2'><i
                                    class="fa fa-user" aria-hidden="true"></i><span> 考试</span></a>
                        </dd>
                        <dd>
                            <a href="javascript:;" data-url="../lsw/question_answer.html" data-icon="fa-user" data-title="提问" kit-target
                               data-id='2'><i
                                    class="fa fa-user" aria-hidden="true"></i><span> 提问</span></a>
                        </dd>
                        <dd>
                            <a href="javascript:;" data-url="form.html" data-icon="fa-user" data-title="已做题库" kit-target
                               data-id='2'><i
                                    class="fa fa-user" aria-hidden="true"></i><span> 已做题库</span></a>
                        </dd>
                        <dd>
                            <a href="javascript:;" data-url="../lsw/error_review.html" data-icon="fa-user" data-title="错题库" kit-target
                               data-id='2'><i
                                    class="fa fa-user" aria-hidden="true"></i><span> 错题库</span></a>
                        </dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;"><i class="fa fa-plug" aria-hidden="true"></i><span> 数据分析</span></a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a href="javascript:;" kit-target
                               data-options="{url:'echarts_demo.html',icon:'&#xe6c6;',title:'单科详情',id:'1'}">
                                <i class="layui-icon">&#xe6c6;</i><span> 单科详情</span></a>
                        </dd>
                        <dd>
                            <a href="javascript:;" kit-target
                               data-options="{url:'echarts_radar.html',icon:'&#xe6c6;',title:'总分比较',id:'1'}">
                                <i class="layui-icon">&#xe6c6;</i><span> 总分比较</span></a>
                        </dd>
                        <dd>
                            <a href="javascript:;" data-url="enrolment.html" data-icon="fa-user" data-title="升学概况" kit-target
                               data-id='2'><i
                                    class="fa fa-user" aria-hidden="true"></i><span> 升学概况</span></a>
                        </dd>
                        <dd>
                            <a href="javascript:;" data-url="echarts_subjectRank.html" data-icon="&#xe614;" data-title="各科综合排名"
                               kit-target data-id='4'><i
                                    class="layui-icon">&#xe614;</i><span> 各科综合排名</span></a>
                        </dd>
                        <dd>
                            <a href="javascript:;" data-url="echarts_selfrange.html" data-icon="&#xe614;" data-title="个人综合排名"
                               kit-target data-id='5'><i
                                    class="layui-icon">&#xe614;</i><span> 个人综合排名</span></a>
                        </dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;"><i class="fa fa-plug"
                                                       aria-hidden="true"></i><span> 个人管理</span></a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a href="javascript:;" kit-target
                               data-options="{url:'test.html',icon:'&#xe6c6;',title:'表格',id:'1'}">
                                <i class="layui-icon">&#xe6c6;</i><span> 个人中心</span></a>
                        </dd>
                        <dd>
                            <a href="javascript:;" data-url="form.html" data-icon="fa-user" data-title="表单" kit-target
                               data-id='2'><i
                                    class="fa fa-user" aria-hidden="true"></i><span> 文章搜索</span></a>
                        </dd>
                        <dd>
                            <a href="javascript:;" data-url="searchVideo.html" data-icon="&#xe628;" data-title="导航栏" kit-target
                               data-id='3'><i
                                    class="layui-icon">&#xe628;</i><span> 视频搜索</span></a>
                        </dd>
                        <dd>
                            <a href="javascript:;" data-url="list4.html" data-icon="&#xe614;" data-title="列表四"
                               kit-target data-id='4'><i
                                    class="layui-icon">&#xe614;</i><span> 文理科选择</span></a>
                        </dd>
                    </dl>
                </li>

                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;"><i class="fa fa-plug" aria-hidden="true"></i><span> 组件</span></a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a href="javascript:;" kit-target
                               data-options="{url:'navbar.html',icon:'&#xe658;',title:'Navbar',id:'6'}"><i
                                    class="layui-icon">&#xe658;</i><span> Navbar</span></a>
                        </dd>
                        <dd>
                            <a href="javascript:;" kit-target
                               data-options="{url:'tab.html',icon:'&#xe658;',title:'TAB',id:'7'}"><i class="layui-icon">&#xe658;</i><span>
											Tab</span></a>
                        </dd>
                        <dd>
                            <a href="javascript:;" kit-target
                               data-options="{url:'onelevel.html',icon:'&#xe658;',title:'OneLevel',id:'50'}"><i
                                    class="layui-icon">&#xe658;</i><span> OneLevel</span></a>
                        </dd>
                        <dd>
                            <a href="javascript:;" kit-target
                               data-options="{url:'app.html',icon:'&#xe658;',title:'App',id:'8'}"><i class="layui-icon">&#xe658;</i><span>
											app.js主入口</span></a>
                        </dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>


    <div class="layui-body" id="container">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;"><i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop">&#xe63e;</i>
            请稍等...
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        2020 &copy;
        <a href="http://kit.zhengjinfan.cn/">www.woniuxy.com/</a> MIT license
    </div>
</div>

<div id="app">
    <div id="font" style="position:fixed; background:#98bf21;height:200px;width:250px;font-size: 12px; bottom: 5px; right: 5px" @click="clickimg()">

    </div>
</div>
<script>
    var message;
    layui.config({
        base: 'src/lvdong/js/',
        version: '1.0.1'
    }).use(['app', 'message'], function () {
        var app = layui.app,
            $ = layui.jquery,
            layer = layui.layer;
        //将message设置为全局以便子页面调用
        message = layui.message;
        //主入口
        app.set({
            type: 'iframe'
        }).init();
        $('#pay').on('click', function () {
            layer.open({
                title: false,
                type: 1,
                content: '<img src="/src/images/pay.png" />',
                area: ['500px', '250px'],
                shadeClose: true
            });
        });
        $('dl.skin > dd').on('click', function () {
            var $that = $(this);
            var skin = $that.children('a').data('skin');
            switchSkin(skin);
        });
        var setSkin = function (value) {
                layui.data('kit_skin', {
                    key: 'skin',
                    value: value
                });
            },
            getSkinName = function () {
                return layui.data('kit_skin').skin;
            },
            switchSkin = function (value) {
                var _target = $('link[kit-skin]')[0];
                _target.href = _target.href.substring(0, _target.href.lastIndexOf('/') + 1) + value + _target.href.substring(
                    _target.href.lastIndexOf('.'));
                setSkin(value);

            },
            initSkin = function () {
                var skin = getSkinName();
                switchSkin(skin === undefined ? 'default' : skin);
            }();
    });

    var messagess;
    var websocket = null;
    if('WebSocket' in window){
        websocket = new WebSocket("ws://localhost:8081/websocket");
    }else {
        alert("浏览器不支持websocket");
    }

    websocket.onopen = function(event){
        console.log("建立连接");
    }
    websocket.onclose = function (event) {
        console.log("关闭连接");
    }
    websocket.onmessage = function (event) {
        console.log("接收到消息"+event.data);
        messagess = event.data;
        alert(messagess)
        document.getElementById("font").style.zIndex="998";
        if (messagess != null){
            $("#font").animate({
                height:'toggle'
            });

            $("#font").html(messagess)
        }
        //弹出提醒
    }
    websocket.onerror = function (event) {
        webSocket.close();

    }
    //动画消失
    $(document).ready(function () {
        $("#font").hide();
    })

    //vue
    new Vue({
        el:"#app",
        data:{
            message:"",
        },
        methods:{
            clickimg:function () {
                var messages = document.getElementById("font").innerHTML;
                alert(messages+"111")
                layui.layer.open({
                    type: 2,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['500px', '500px'], //宽高
                    time :1000000,
                    anim :5,
                    resize :true,
                    shade: [0.8, '#393D49'],
                    content:'../wzh/beginStudent.html?messages='+messages,
                });
            },
        },
        mounted(){
            var id = 2;
            //获取用户id
            axios
                .get("../divide/sid/"+id)
                .then(res=>{
                    console.info(res.data.code)
                    this.message = res.data.data;
                    message = res.data.data;
                    console.info(this.message)
                    document.getElementById("font").style.zIndex="998";
                    if (res.data.code == 400){

                        $("#font").animate({
                            height:'toggle'
                        });
                        $("#font").html(message)
                    }
                });
        }
    });
</script>
</body>
</html>
